<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title>注册页面</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover" />
		<link href="css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="css/register.css" />
		<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/mui.min.js"></script>
	</head>
	<body style="background:#fff">
		<header class="mui-bar mui-bar-nav">
			<div style="height: 20px;"></div>
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">注册</h1>
		</header>
		<div class="mui-content mainRe" style="margin-top: 64px;">
			<div class="mainHeader">
				<h4>请填写以下注册信息</h4>
				<p>为确保您的便捷使用与账户安全</p>
			</div>
			<div class="mainText">
				<div class="mui-input-row mainLine">
					<label class="phone">手机</label>
					<input type="text" class="re_phone" placeholder="请输入您的手机号">
				</div>
				<!-- <div class="mui-input-row mainLine" style="position:relative;border-bottom: none;">
					<label class="pm">验证码</label>
					<input type="text" class="lineBottom re_ma" placeholder="请输入您收到的验证码">
					<div class="mesM">
						<input class="ym password_getcode" readonly="readonly" type="text" value="获取验证码">
					</div>
				</div> -->
				<div class="mui-input-row mainLine">
					<label class="pw">密码</label>
					<input type="password" class="re_pw" placeholder="请设置您的密码">
				</div>
				<div class="mui-input-row mainLine">
					<label class="pw">确认密码</label>
					<input type="password" class="agin_pw" placeholder="请再次输入您的密码">
				</div>
				<div class="mainButton">
					<button type="button" class="mui-btn mui-btn-blue" id="next">下一步</button>
					<p class="login">已有账户？<a>登录</a></p>
				</div>
			</div>
			<!-- <div class="mui-input-row mui-checkbox mainPosi">
				<input name="" type="checkbox" checked="checked">
				<p>我已阅读并同意<span class="agreement">《撬装设备用户协议》</span></p>
			</div> -->
		</div>

		<script type="text/javascript">
			mui.init();
			var _url = 'http://112.54.80.235:8038';
			mui.plusReady(function() {
				//关闭等待框
				plus.nativeUI.closeWaiting();
				/* 跳转登录页面 */
				$('.login').on('tap', function() {
					mui.openWindow({
						url: 'login.html',
						id: 'login.html',
						waiting: {
							autoShow: true, //自动显示等待框，默认为true
							title: '正在加载...', //等待对话框上显示的提示内容
						}
					});
				});

				/*  */
				$('.mainLine input').bind('focus', function() {
					$('.mainPosi').css('z-index', '10');
					$('.mainText').css('z-index', '20');
				});
				//协议
				$('.agreement').on("tap", function() {
					mui.openWindow({
						url: 'agreement.html',
						id: 'agreement.html',
						waiting: {
							autoShow: true, //自动显示等待框，默认为true
							title: '正在加载...', //等待对话框上显示的提示内容
						}
					});
				})
				//单击下一步按钮
				$('#next').on('tap', function() {
					var phone = mui(".re_phone")[0].value;
					var password = mui('.re_pw')[0].value;
					var agin_pw = mui('.agin_pw')[0].value;
					if (!(/^1[34578]\d{9}$/.test(phone))) {
						mui.toast('请输入正确格式的手机号');
						return false;
					};
					//密码
					var regx = /^(?!([a-zA-Z]+|\d+)$)[a-zA-Z\d]{6,20}$/;
					if (!regx.test(password)) {
						mui.toast('应包含字母和数字，且不少于6位');
						return false;
					};
					if(password!=agin_pw){
						mui.toast('两次输入的密码不一致');
						return false;
					};
					mui.openWindow({
						url: "message.html",
						id: "message.html",
						extras: {
							phone: phone,
							password: password
						},
						waiting: {
							autoShow: true, //自动显示等待框，默认为true
							title: '正在加载...', //等待对话框上显示的提示内容
						}
					});
					//验证验证码
					// $.ajax({
					// 	url: _url + '/actionapi/Users/GetYanZhengMa',
					// 	type: "post",
					// 	dataType: 'json',
					// 	contentType: "application/json; charset=utf-8",
					// 	timeout: 5000,
					// 	data: JSON.stringify({
					// 		phone: phone,
					// 		code: code
					// 	}),
					// 	success: function(data) { //回调函数，result，返回值
					// 		if (data.code == 1) {
					// 			mui.openWindow({
					// 				url: "message.html",
					// 				id: "message.html",
					// 				extras: {
					// 					phone: phone,
					// 					password: password
					// 				},
					// 				waiting: {
					// 					autoShow: true, //自动显示等待框，默认为true
					// 					title: '正在加载...', //等待对话框上显示的提示内容
					// 				}
					// 			});
					// 		} else {
					// 			mui.toast('验证码有误');
					// 			return;
					// 		}
					// 	},
					// 	error: function(xhr, type, errorThrown) {
					// 		//console.log(errorThrown);
					// 		mui.toast('GetYanZhengMa接口连接失败');
					// 	}
					// });
				});

				/* 单击获取验证码 */
				$('.ym').on('tap', function() {
					var val = mui(".re_phone")[0].value;
					//mui.toast('hhh');
					//验证手机号格式
					if (!(/^1[34578]\d{9}$/.test(val))) {
						mui.toast('请输入正确格式的手机号')
						return false;
					};
					//验证手机号是否注册
					$.ajax({
						type: 'get',
						url: _url + '/actionapi/Users/CheckUser',
						dataType: 'json',
						contentType: "application/json; charset=utf-8",
						timeout: 5000,
						data: {
							phone: val
						},
						success: function(data) {
							if (data.code == 1) {
								//手机号未注册
								register(val);
							} else {
								//手机号已注册
								plus.nativeUI.confirm(
									"该手机号已注册",
									function(event) {
										var index = event.index;
										if (index == 0) {
											//去登录
											mui.openWindow({
												url: "login.html",
												id: "login.html"
											});
										};
										if (index == 1) {
											//继续注册
											$(".re_phone").val("");
										}
									},
									'提示',
									["去登录", "继续注册"]
								)
							}
						},
						error: function(XMLHttpRequest, textStatus, errorThrown) {
							console.log(JSON.stringify(XMLHttpRequest));
						}
					})
				})

			});

			function register(val) {
				var time = 60;
				$('.ym').attr("disabled", true)
				var myVar = setInterval(function() {
					if (time > 1) {
						time--;
						mui('.ym')[0].value = time + "秒后重新获取"
					} else {
						clearInterval(myVar);
						$('.ym').attr("disabled", false)
						mui('.ym')[0].value = "获取验证码"
						time = 60
					}
				}, 1000);
				$.ajax({
					url: _url + '/actionapi/Users/GetDuanXin',
					type: "post",
					contentType: "application/json; charset=utf-8",
					data: val,
					success: function(data) { //回调函数，result，返回值
						if (data.code == 1) {
							mui.toast('获取验证码成功');
						} else {
							mui.toast('获取验证码失败');
						}
					},
					error: function(xhr, type, errorThrown) {
						console.log(JSON.stringify(xhr));
						mui.toast('GetDuanXin接口连接失败');
					}
				})
			}
		</script>
	</body>
</html>
